<template>
    <el-dialog :title="dialogStatus | titleFilter" :close-on-click-modal="false" width="600px" :visible.sync="visible">
        <el-form ref="temp" :model="temp" :rules="rule" label-width="120px" @keyup.enter.native="dataFormSubmit()">

            <el-form-item label="账单应收金额:">
                <!-- <el-select v-model="temp.parkId" placeholder="请选择" @change="park_change">
                    <el-option v-for="item in park_options" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select> -->
                <el-input :value="bill_info ? bill_info.billAllMoney : '--'" placeholder="请输入" disabled />
            </el-form-item>

            <el-form-item label="减免规则:">
                <el-radio-group v-model="temp.freeType">
                    <el-radio v-for="(item, index) in freeType_" :key="index" :label="item.value">{{ item.lable }}</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item v-if="temp.freeType == 2" label="折扣率(％):" prop="freeRate">
                <el-input v-model="temp.freeRate" placeholder="请输入" />
            </el-form-item>

            <el-form-item v-if="temp.freeType == 1" label="减免金额(元):" prop="freeMoney">
                <el-input v-model="temp.freeMoney" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="减免后应收:">
                <el-input :value="freeMoney_res" placeholder="请输入" disabled />
            </el-form-item>

            <el-form-item label="收款备注" style="width:100%" prop="freeReason">
                <el-input v-model="temp.freeReason" type="textarea" :autosize="{ minRows: 3, maxRows: 4}" placeholder="请输入" />
            </el-form-item>

            <!-- <el-form-item label="收费标准:" prop="standardId">
                <el-select v-model="temp.standardId" placeholder="请选择" :disabled="!temp.projectId">
                    <el-option v-for="item in standard_options" :key="item.id" :label="item.criterionName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item> -->

            <!-- <el-form-item label="选择房屋:" prop="houses_options">
                <el-tree :data="houses_options" ref="house_tree" show-checkbox node-key="id" :props="houses_props"
                    @check-change="houses_change" :default-checked-keys="temp.house_checked">
                </el-tree>
            </el-form-item> -->

            <!-- <el-form-item label="开始/结束月份" prop="beginTime_endTime">
                <el-date-picker v-model="temp.beginTime_endTime" style="width:100%" type="monthrange" format="yyyy 年 MM 月"
                    value-format="yyyy-MM" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
                </el-date-picker>
            </el-form-item> -->

            <!-- <el-form-item label="收费项目" prop="itemsName">
                <el-input v-model="temp.itemsName" placeholder="请输入" />
            </el-form-item> -->

            <!-- <el-form-item label="是否周期费用" prop="billingCycleFlag_type">
                <el-select v-model="temp.billingCycleFlag_type" placeholder="请选择">
                    <el-option v-for="item in billingCycleFlagType_" :key="item.value" :label="item.lable" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="账单精确到" prop="moneyAccurate_type">
                <el-select v-model="temp.moneyAccurate_type" placeholder="请选择">
                    <el-option v-for="item in moneyAccurateType_" :key="item.value" :label="item.lable" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="是否启用" prop="projrct_state">
                <el-select v-model="temp.projrct_state" placeholder="请选择">
                    <el-option v-for="item in projectState_" :key="item.value" :label="item.lable" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item> -->

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">
                取消
            </el-button>
            <el-button type="primary" @click="dataFormSubmit">
                确认
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
import { saveFree } from '@/api/charge'// 请求数据  收费标准
import { getTreeHouseList } from '@/api/assets'// 请求数据 固定资产
import { projectState, billingCycleFlagType, moneyAccurateType, freeType } from '@/utils/enum' //字典
export default {
    filters: {
        // 过滤弹框的标题
        titleFilter (type) {
            const textMap = {
                create: '减免账单',
                update: '修改'
            }
            return textMap[type]
        }
    },
    computed: {
        freeType_ () {
            // let arr = [{ lable: '全部', value: '' }]
            let arr = []
            for (let key in freeType) {
                arr.push({
                    lable: freeType[key],
                    value: key
                })
            }
            return arr
        },
        freeMoney_res () {
            // bill_info.billAllMoney
            if (!this.bill_info) return 0;
            let number = 0;
            //折扣率的时候计算
            if (this.temp.freeType == 2) {
                number = (this.bill_info.billAllMoney * (this.temp.freeRate / 100)).toFixed(2);
                this.temp.freeMoney = number == 0 ? "" : this.bill_info.billAllMoney - number
            } else {
                number = this.bill_info.billAllMoney - (this.temp.freeMoney ? this.temp.freeMoney : 0);
                this.temp.freeRate = number == this.bill_info.billAllMoney ? "" : parseInt(number / this.bill_info.billAllMoney * 100)
            }
            return number
        }
        // billingCycleFlagType_ () {
        //     // let arr = [{ lable: '全部', value: '' }]
        //     let arr = []
        //     for (let key in billingCycleFlagType) {
        //         arr.push({
        //             lable: billingCycleFlagType[key],
        //             value: key
        //         })
        //     }
        //     return arr
        // },
        // moneyAccurateType_ () {
        //     // let arr = [{ lable: '全部', value: '' }]
        //     let arr = []
        //     for (let key in moneyAccurateType) {
        //         arr.push({
        //             lable: moneyAccurateType[key],
        //             value: key
        //         })
        //     }
        //     return arr
        // },
    },
    data () {
        return {
            visible: false,
            dialogStatus: '', // 弹框新增或者修改
            temp: { // 表单数据
                id: '',
                // freeFlag: '2',//是否减免
                freeType: '2',//减免类型
                freeMoney: "",//减免金额
                freeRate: "",//减免折扣
                freeReason: '',//减免原因
            },
            rule: {
                freeMoney: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                freeRate: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                freeReason: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ]
            },
            bill_info: null,//账单信息
        }
    },
    created () {
        // this.getPark()
    },
    methods: {
        // 初始化
        init (status, param) {
            console.log(param)
            this.bill_info = param
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            this.$nextTick(() => { // 重置表单
                // this.$refs['temp'].clearValidate()
            })
            this[status](param) // 新增或者修改
        },
        create (param) {
            this.resetTemp(param) // 清空表单
        },
        // async update (param) {
        //     // console.log(param)
        //     this.getCharge()
        //     let data = Object.assign({}, param)//从上一页带过来当前的数据
        //     // const { data, code } = await getParkDetails({}, param.id) // 从后台获取当前的的数据
        //     // 成功
        //     this.temp.id = data.id
        //     this.temp.parkId = data.parkId
        //     this.temp.parkName = data.parkName
        //     this.temp.itemsName = data.itemsName
        //     this.temp.billingCycleFlag_type = data.billingCycleFlag
        //     this.temp.moneyAccurate_type = data.moneyAccurateType
        //     this.temp.projrct_state = data.enableFlag

        // },
        // 新增数据清空表单数据
        resetTemp (param) {
            this.temp = {
                id: '',
                // freeFlag: '2',//是否减免
                freeType: '2',//减免类型
                freeMoney: "",//减免金额
                freeRate: "",//减免折扣
                freeReason: '',//减免原因
            }
        },
        // 表单提交
        dataFormSubmit () {
            this.$refs['temp'].validate(async (valid) => {
                if (!valid) return
                let zk = (this.temp.freeRate / 100).toFixed(2)
                const params = {
                    'id': this.temp.id || undefined,
                    'freeType': this.temp.freeType,
                    'freeMoney': this.temp.freeMoney,
                    'freeRate': zk,
                    'freeReason': this.temp.freeReason,
                    'billDetailId': this.bill_info.id,
                }
                const textMap = {
                    create: saveFree, // 新增
                    // update: upDataCharge // 修改
                }

                // 提交表单
                const { code, message } = await textMap[this.dialogStatus](params)

                // 成功
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.$emit('getList')
                    }
                })
            })
        },

        // ===>>>>>>>>>
        //选择项目
        project_change (e) {
            this.getStandard()
        },



    }
}
</script>

<style lang="scss">
.mod-menu {
    .menu-list__input,
    .icon-list__input {
        > .el-input__inner {
            cursor: pointer;
        }
    }
    &__icon-popover {
        width: 458px;
        overflow: hidden;
    }
    &__icon-inner {
        width: 478px;
        max-height: 258px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    &__icon-list {
        width: 458px;
        padding: 0;
        margin: -8px 0 0 -8px;
        > .el-button {
            padding: 8px;
            margin: 8px 0 0 8px;
            > span {
                display: inline-block;
                vertical-align: middle;
                width: 18px;
                height: 18px;
                font-size: 18px;
            }
        }
    }
    .icon-list__tips {
        font-size: 18px;
        text-align: center;
        color: #e6a23c;
        cursor: pointer;
    }
}
</style>
